<template>
  <!-- html -->
  <div class="box1">
    爸爸今年：{{ father }}岁啦 <br>
    妈妈今年：{{ father }}岁啦 
    <div class="box2">
      大女儿今年{{ daughter.age1 }}岁 <br />
      小女儿今年{{ daughter.age2 }}岁
    </div>
  </div>
</template>

<script>
/* js */
/* vue组件核心配置项 */
export default {
  data() {
    return {
      father: 53,
      daughter: {
        age1: 30,
        age2: 24,
      },
    }
  },
}
/* css */
</script>

<style lang="less">
.box1 {
  margin-top: 20px;
  width: 500px;
  height: 100px;
  background-color: #875;
  .box2 {
    width: 500px;
    height: 50px;
    background-color: yellow;
  }
}
</style>
